<template>
	<view class="content">
		<view class="login-bg">
			<view class="login-card">
				<image src="../../static/logo.png" mode='aspectFit' class="zai-logo"></image>
			</view>
		<view class="zai-title">{{title}}</view>
		<view class="zai-title2">{{desc}}</view>
		</view>
		<view class="page-bottom">
			<view class="action-btn-group">
				<button class="action-btn no-border" type="primary" open-type="getUserInfo"  @click="tologin">{{loginBtnTitle}}</button>
				<button class="action-btn no-border buy-now-btn" type="primary"  @click="goHome">返回首页</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				query:{code:null,referenceId:null,signature:null,rawData:null,encryptedData:null,iv:null},
				title:'',
				desc:'',
				loginBtnTitle:'微信登陆',
			}
		},
		onLoad(options) {
			if(!!this.$store.state.referenceId){
				this.query.referenceId = this.$store.state.referenceId;
			}
			console.log("===========silentLogin============state.isSilentLogin========" + this.$store.state.isSilentLogin)
			if(this.$store.state.isSilentLogin){
				this.silentLogin();
			}
			this.title = this.$mConfig.loginTitleTxt;
			this.desc = this.$mConfig.descTxt;
			// #ifdef MP-WEIXIN
			this.loginBtnTitle = "微信登陆";
			// #endif
			// #ifdef MP-TOUTIAO
			this.loginBtnTitle = "头条登陆";
			// #endif
		},
		methods: {
			silentLogin(){
				console.log("===========silentLogin============silentLogin========")
				uni.login({
					provider: 'weixin',
					success: (res) => {
						console.log('login success:', res);
						if (res && res.code) {
							this.query.code = res.code;
							this.checkCode();
						}
					},
					fail: (err) => {
						console.log('login fail:', err);
					}
				});
			},
			async checkCode() {
				try {
					let data = null;
					// #ifdef MP-WEIXIN
					if(this.$store.state.isSilentLogin){
						data = await this.$apis.getWxXcxSilentCheckCode(this.query);
					}else{
						data = await this.$apis.getWxXcxCheckCode(this.query);
					}
					// #endif
					
					// #ifdef MP-TOUTIAO
					if(this.$store.state.isSilentLogin){
						data = await this.$apis.getTtXcxSilentCheckCode(this.query);
					}else{
						data = await this.$apis.getTtXcxCheckCode(this.query);
					}
					// #endif
					
					console.log(JSON.stringify(data));
					// 前端自动登录
					this.$store.commit("SET_TOKEN", data.token);
					this.$store.commit("SET_USERINFO", data.user || {});
					this.$store.commit("SET_EXPIRE_TIME", data.expireTime || 0);
					this.$store.commit("SET_GOODS_MSG_CACHE", null);
					uni.getStorage({key:'beforeLoginUrlQuery',
						success: (res) => {
							console.log(JSON.stringify(res.data));
							this.$mRouter.push({
								route: res.data.routesConfig,
								query: res.data.query,
							});					
						},
						fail: (res) => {
							console.log(JSON.stringify(res));
							this.$mRouter.switchTab({
								route: this.$mRoutesConfig.main,
								query: res.data.query,
							});					
						},
					});
					
				} catch (e) {
				}
			},
			goHome(){
				this.$mRouter.switchTab({
						route: this.$mRoutesConfig.main,
						query: {},
					});					
			},
			tologin() {
				uni.login({
					// #ifdef MP-WEIXIN
					provider: 'weixin',
					// #endif
					// #ifdef MP-TOUTIAO
					provider: 'toutiao',
					// #endif
					success: (res) => {
						console.log('login success:', res);
						if (res && res.code) {
							this.query.code = res.code;
							uni.getUserInfo({
								// #ifdef MP-WEIXIN
								provider: 'weixin',
								// #endif
								// #ifdef MP-TOUTIAO
								provider: 'toutiao',
								withCredentials:true,
								// #endif
								success: (result) => {
									console.log('getUserInfo success', result);
									this.query.signature = result.signature;
									// #ifdef MP-WEIXIN
									this.query.rawData = result.rawData;
									// #endif
									this.query.encryptedData = result.encryptedData;
									this.query.iv = result.iv;
									this.checkCode();
								},
								fail: (error) => {
									console.log('getUserInfo fail', error);
									let content = error.errMsg;
									if (~content.indexOf('uni.login')) {
										content = '请点击登录';
									}
									uni.showModal({
										title: '获取用户信息失败',
										content: '错误原因' + content,
										showCancel: false
									});
								}
							});
						}
					},
					fail: (err) => {
						console.log('login fail:', err);
					}
				});
			}
		}
	}
</script>

<style lang='scss'>
	.zai-title{
		line-height: 120upx;
		font-size: 58upx;
		color: #f7d680;
		font-weight: bold;
		text-align: left;
		width: 100%;
	}
	.zai-title2{
		line-height: 80upx;
		font-size: 38upx;
		color: #f7d680;
		font-weight: bold;
		text-align: left;
		width: 100%;
	}
	
	.zai-logo{
		width: 100%;
		width: 100%;
		height: 310upx;
	}
	.landing{
		height: 84upx;
		line-height: 84upx;
		border-radius: 44upx;
		font-size: 32upx;
		background: linear-gradient(left,#FF978D, #FFBB69);
	}
	.login-btn{
		padding: 10upx 20upx;
		margin-top: 350upx;
	}
	.login-function{
		overflow: auto;
		padding: 20upx 20upx 30upx 20upx;
	}
	.login-forget{
		float: left;
		font-size: 26upx;
		color: #999;
	}
	.login-register{
		color: #666;
		float: right;
		font-size: 26upx;

	}
	.login-input input{
		background: #F2F5F6;
		font-size: 28upx;
		padding: 10upx 25upx;
		height: 62upx;
		line-height: 62upx;
		border-radius: 8upx;
	}
	.login-margin-b{
		margin-bottom: 25upx;
	}
	.login-input{
		padding: 10upx 20upx;
	}
	.login-head{
		font-size: 34upx;
		text-align: center;
		padding: 25upx 10upx 55upx 10upx;
	}
	.login-card{
		background: rgb(203, 87, 60);
		border-radius: 12upx;
		padding: 10upx 25upx;
		box-shadow: 0 6upx 18upx rgba(0,0,0,0.12);
		position: relative;
		margin-top: 120upx;
	}
	.login-bg {
		height: 360upx;
		padding: 25upx;
		background: linear-gradient(#FF978D, #FFBB69);
	}
	/* 底部操作菜单 */
	.page-bottom{
		position:fixed;
		left: 30upx;
		bottom:30upx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690upx;
		height: 100upx;
		background: rgba(255,255,255,.9);
		box-shadow: 0 0 20upx 0 rgba(0,0,0,.5);
		border-radius: 16upx;
		
		.p-b-btn{
			display:flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96upx;
			height: 80upx;
			.yticon{
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
			}
			&.active, &.active .yticon{
				color: $uni-color-primary;
			}
			.icon-fenxiang2{
				font-size: 42upx;
				transform: translateY(-2upx);
			}
			.icon-shoucang{
				font-size: 46upx;
			}
		}
		.action-btn-group{
			display: flex;
			height: 76upx;
			border-radius: 100px;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #fa436a;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			background: linear-gradient(to right, #ffac30,#fa436a,#F56C6C);
			margin-left: 20upx;
			position:relative;
			&:after{
				content: '';
				position:absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28upx;
				width: 0;
				border-right: 1px solid rgba(255,255,255,.5);
			}
			.action-btn{
				display:flex;
				align-items: center;
				justify-content: center;
				width: 280upx;
				height: 100%;
				font-size: $font-base ;
				padding: 0;
				border-radius: 0;
				background: transparent;
			}
		}
	}		

</style>
